<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>ztree插件复习</title>

		<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="./js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="./js/easyui/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="./js/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" href="./js/easyui/themes/icon.css" />
		<!-- 导入ztree类库 -->
		<link rel="stylesheet" href="./js/ztree/zTreeStyle.css" type="text/css" />
		<script src="./js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"></script>
		<script type="text/javascript">
			//生成简单ztree三步曲
			//第一步：配置Setting的参数
			var setting = {
				data: {
					simpleData: { // 简单数据 
						enable: true,
						idKey: "id",
						pIdKey: "pid"
					}
				},
				callback: {
					onClick: function onClick(event, treeId, treeNode, clickFlag) {
						if(treeNode.file != null && treeNode.file != ''){
							alert(treeNode.name+"=========="+treeNode.file);
						}
					}
				}
			};

			//第二步，配置菜单 数据源（示例中使用查询后台获取菜单列表数据）
			$(function() {
				//jquery的ajax请求（post的两个参数：参数1：请求的Action路径；参数2：回调函数
				$.post("./ztree_query.action", function(data) {
					//第三步：初始化菜单
					$.fn.zTree.init($("#asyncTree"), setting, data);
				}, "json");
			});
		</script>
	</head>

	<body>
		<div id="asyncTree" class="ztree"></div>
	</body>

</html>